<template>
  <div
    class="container"
    id="supplier-upload"
  >
    <el-row :gutter="10">
      <el-col
        :span="hasCheckRole?12:16"
      >
        <el-card
          shadow="hover"
          :body-style="{height:`${$store.state.pageHeight-290}px`,overflow:`auto`}"
        >
          <div
            slot="header"
          >
            <span><i class="el-icon-view"></i> 单据信息</span>
          </div>
          <Default
            v-if="formEntity"
            :form="formEntity"
          />
        </el-card>
      </el-col>
      <el-col
        :span="hasCheckRole?6:8"
      >
        <el-card
          shadow="hover"
          :body-style="{height:`${$store.state.pageHeight-290}px`,overflow:`auto`}"
        >
          <div
            slot="header"
          >
            <span><i class="el-icon-view"></i> 审批进度</span>
          </div>
          <el-timeline>
            <el-timeline-item
              v-for="(log,index) in logs"
              :key="index"
              :timestamp="$_util.formatDate(log.createTime)"
              placement="top"
            >
              <el-card>
                <h4>
                  {{ log.taskStatusText }}
                  <el-tag
                    v-if="log.resultStatus===1"
                    style="margin-left: 10px"
                    type="success"
                    size="small"
                  >
                    通过
                  </el-tag>
                  <el-tag
                    v-if="log.resultStatus===2"
                    style="margin-left: 10px"
                    type="danger"
                    size="small"
                  >
                    退回
                  </el-tag>
                  <el-tag
                    v-if="log.resultStatus===null"
                    style="margin-left: 10px"
                    size="small"
                  >
                    等待审批
                  </el-tag>
                </h4>
                <template v-if="log.resultStatus">
                  <p
                    class="p"
                    v-if="log.collaborators && log.collaborators.length"
                  >
                    协作人：
                    <UserInfo
                      v-for="item in log.collaborators"
                      :key="item.id"
                      :name="item.name"
                      :id="item.id"
                      tag
                    >
                    </UserInfo>
                  </p>
                  <p class="p">
                    操作人：<UserInfo
                      :id="log.userId"
                      :name=" log.userName"
                    ></UserInfo>
                  </p>
                  <p
                    class="p"
                    v-if="log.content"
                  >
                    审批意见：{{ log.content }}
                  </p>
                  <p
                    class="p"
                    v-if="log.annex"
                  >
                    <span style="color: #1f7bfe">附件：</span><br>
                    <Annex
                      v-for="(item,li) in log.annex"
                      :key="li"
                      :name="item.name"
                      :url="item.url"
                    />
                  </p>
                </template>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </el-col>
      <el-col
        v-if="hasCheckRole"
        :span="6"
      >
        <el-card
          :body-style="{height:`${$store.state.pageHeight-290}px`,overflow:`auto`}"
          shadow="hover"
        >
          <div
            slot="header"
          >
            <span><i class="el-icon-edit"></i> 提交审批</span>
          </div>
          <el-form :model="form">
            <el-form-item
              v-if="currentFlowNode && currentFlowNode.collaborator && currentFlowNode.collaborator.length"
              label="协作人："
              prop="annex"
            >
              <br>
              <el-checkbox-group v-model="form.collaborators">
                <el-checkbox
                  v-for="item in currentFlowNode.collaborator"
                  :key="item.id"
                  :label="item.id"
                >
                  {{ item.name }}
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item
              label="审批意见："
              prop="content"
            >
              <el-input
                type="textarea"
                :rows="3"
                v-model="form.content"
                placeholder="请填写审批意见"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="附件："
              prop="annex"
            >
              <br>
              <Upload v-model="form.annex"></Upload>
            </el-form-item>
            <el-form-item
              label="通过/退回"
            >
              <div>
                <el-button
                  size="small"
                  type="success"
                  @click="submit(1)"
                >
                  通过
                </el-button>
                <el-button
                  size="small"
                  type="danger"
                  @click="submit(2)"
                >
                  退回
                </el-button>
              </div>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import Default from './detail/Default'
  import Annex from '@/component/approval/Annex'
  export default {
    name: 'Progressdetail',
    components: {
      Default,
      Annex,
      Upload: () => import('@/component/approval/Upload')
    },
    props: {
      pid: {
        type: Number,
        default: 0
      }
    },
    data () {
      return {
        form: {
          collaborators: [],
          content: '',
          annex: [] // 附件
        },
        id: 0,
        logs: [],
        entity: {},
        currentFlowNode: null, // 当前流程节点
        formEntity: null
      }
    },
    async created () {
      this.id = this.$route.params.id || this.pid
      if (this.id) {
        this.getTask()
      }
    },
    computed: {
      checkHeight () {
        return this.hasCheckRole ? 565 : 290
      },
      // 是否有权限审批
      hasCheckRole () {
        if ([undefined, 1, 2].includes(this.entity.resultStatus)) return false
        const userInfo = JSON.parse(sessionStorage.getItem('user_info'))
        return parseInt(userInfo.userId) === parseInt(this.entity.waitActionUserId)
        // // 映射
        // let currentStatus = 0
        // try {
        //   currentStatus = this.logs[this.logs.length - 1].taskStatusId
        // } catch (e) {
        //
        // }
        // const node = this.ruleMapping[currentStatus]
        // if (!node) return false
        // return this.$accessCheck(node)
      }
    },
    methods: {
      async submit (result) {
        await this.$confirm('确定要执行该操作吗？', '确认提示')
        const params = {
          result,
          content: this.form.content,
          annex: JSON.stringify(this.form.annex),
          collaborators: JSON.stringify(this.currentFlowNode.collaborator.filter(item => this.form.collaborators.includes(item.id)))
        }
        await this.$service.gzl.taskApply(this.id, params)
        this.$message.success('审批成功')
        this.form.content = ''
        this.getTask()
        // 触发结束
        this.$emit('end')
      },
      // 获取流程
      async getFlow (flowId) {
        const { data } = await this.$service.gzl.getFlow(flowId)
        const tasks = data.data.tasks
        const node = tasks.find(item => this.logs[this.logs.length - 1].taskStatusId === item.taskNodeValue)
        if (node && node.collaborator) {
          node.collaborator = JSON.parse(node.collaborator)
        }
        this.currentFlowNode = node
      },
      async getTask () {
        const { data } = await this.$service.gzl.processDetail(this.id)
        this.logs = data.data.logEntitys.map(item => {
          return { ...item, annex: item.annex ? JSON.parse(item.annex) : '', collaborators: item.collaborators ? JSON.parse(item.collaborators) : [] }
        })
        this.formEntity = data.data.formEntity
        this.formEntity.annex = JSON.parse(this.formEntity.annex)
        this.formEntity.annex = this.formEntity.annex.filter(item => item.value.length)
        this.entity = data.data
        this.getFlow(data.data.flowId)
      }
    }
  }
</script>
<style>
  #supplier-upload .el-card__header{
    font-size: 16px;
    background-color: #243247;
    color: #d2d2d2;
    height: 42px;
    line-height: 42px;
    box-sizing: border-box;
    padding: 0 12px;
  }
</style>
<style scoped>
  .container{
    padding: 10px;
  }
  .p{
    color: #8c8c8c;
    padding: 5px 0;
  }
</style>
